/** @format */

import React, { useState, useEffect } from "react";
import request from "../utils/request";
import { message, Form, Input, Button,Checkbox } from "antd";
import { useNavigate } from "react-router-dom";
function Login() {
  const navigate = useNavigate();
  const [aa] = Form.useForm();
 
  const loginfn = async () => {
    const alivalues = await aa.validateFields();
    const values = aa.getFieldsValue();
    console.log(values);
    request.post('/api/verify',{
      account:values.account,
      secret_key:values.password
    }).then(res=>{
      console.log(res)
      localStorage.setItem('ver',res.data.verify)
      navigate('/home/erlogin')
    })
    
  };
 
  return (
    <div className="login-container">
      <div className="login-card">
        <div className="login-header">
          <h1 className="login-title">欢迎登录</h1>
          <p className="login-subtitle">请输入您的账号信息</p>
        </div>
        
        <Form
          form={aa}
          initialValues={{ remember: true }}
          autoComplete="off"
          layout="vertical"
        >
          <Form.Item
            label={<span style={{ fontWeight: '500', color: '#333' }}>账号</span>}
            name="account"
            rules={[{ required: true, message: "请输入账号" }]}
          >
            <Input 
              className="login-input"
              placeholder="请输入账号"
            />
          </Form.Item>

          <Form.Item
            label={<span style={{ fontWeight: '500', color: '#333' }}>密码</span>}
            name="password"
            rules={[{ required: true, message: "请输入密钥" }]}
          >
            <Input 
              className="login-input"
              placeholder="请输入密钥"
            />
          </Form.Item>
          
          <Form.Item style={{ marginBottom: '0', marginTop: '30px' }}>
            
            <Button 
              className="login-button"
              type="primary" 
              onClick={loginfn}
            >
              验证登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}

export default Login;
